import React from "react";

import { Layout, theme } from "antd";

import Menu from "./components/Menu";
import Header from "./components/Header";
import { Outlet } from "react-router-dom";

import "./index.less";

import { useSelector } from "react-redux";

const { Sider, Content } = Layout;

const App: React.FC = () => {
  // const [collapsed, setCollapsed] = useState(false);
  const collapsed = useSelector((state: any) => state.home.collapsed);

  const {
    token: { colorBgContainer },
  } = theme.useToken();

  // const changeCollapsed = () => {
  //   setCollapsed((v) => !v);
  // };

  return (
    <Layout style={{ minHeight: "100vh" }} className="home-wrap">
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical" />
        <Menu />
      </Sider>
      <Layout>
        {/* <Header onChangeCollapsed={changeCollapsed} collapsed={collapsed} /> */}
        <Header />
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;
